<template>
	<view class="content">
		<view class="header">
			<view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :duration="duration">
					<swiper-item v-for="(imgList,index) in imageList" :key="index">
						<view class="swiper-item uni-bg-red" v-for="(sub,index1) in imgList.subtag" :key="index1">
							<image :src="sub.img" :alt="sub.title" style="width: 30px; height: 30px;" /><br />
							<span>
								{{sub.title}}
							</span>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="activity">
				<view class="seckill"></view>
				<view style="float: left;margin-top: 70px;margin-left: -65px;color: white;font-weight: bold;">限时低价
				</view>
				<view class="">
					<input type="text" value="去抢购" disabled="true" style="
					 width: 65px;height: 20px;border-radius: 15px;text-align: left;
					 float: left;margin-top: 100px;margin-left: -65px;
					 background-color: white;color: #ff5500;
					 background-image: url('https://img20.360buyimg.com/img/jfs/t1/238192/15/7188/265/65783069F1178bf7d/b15fdc2244088b71.png');
					 background-repeat: no-repeat;font-size: 16px;
					 background-position: 50px 7px;" />
					<view class="index_skil">
						<swiper style="width: 100%;height: 123px;" circular>
							<swiper-item v-for="(item,index) in advertisement" :key="index">
								<view style="float: left;" v-for="(itemchilrend,index1) in item.item" :key="index1">
									<image :src="itemchilrend.icon" style="width: 60px;
										height: 60px;margin-top: 20px;" mode=""></image><br />
									<span
										style="color: #ff5500;margin-left: 12px;font-size: 14px;letter-spacing: 0px;">{{itemchilrend.title}}</span>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			<view class="goods">
				<scroll-view scroll-y="true" style="height: 700rpx;float: left;" lower-threshold="10"
					@scrolltolower="addView()">
					<view v-for="(good,index) in goodsList" :key="index"
						style="width: 200px;background-color: aliceblue;font-size: 12px;border-radius: 15px 15px 0px 0px;margin-top: 10px;">
						<image :src="good.ison" style="width: 200px;height: 200px;border-radius: 15px 15px 0px 0px;"
							mode=""></image><br />
						<span>
							{{good.title}}
						</span>
					</view>
					<view v-for="(item, index) in itemList" :key="index"
						:style="{ width: '130px', borderRadius: '15px 15px 0px 0px', backgroundColor: 'aliceblue', fontSize: '12px', marginLeft: '210px', marginTop: item.with + 'px' }"
						style="float: right;">
						<image :src="item.ison" style="width:130px;height: 130px;border-radius: 15px 15px 0px 0px;"
							mode=""></image><br />
						<span>
							{{item.title}}
						</span>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageList: [{
						subtag: [{
								img: "../../static/d663cd498321eadc.png",
								title: "京东超市"
							},
							{
								img: "../../static/38d00b686257b0f4.png",
								title: "京东电器"
							},
							{
								img: "../../static/13ce837dd39ad1ad.png",
								title: "服饰美妆"
							},
							{
								img: "../../static/b63c6a2fa0327964.png",
								title: "充值中心"
							},
							{
								img: "../../static/1b020aa3f9cf89a0.png",
								title: "PLUS会员"
							},
						]
					},
					{
						subtag: [{
								img: "../../static/0ba51f592d28dfdd.png",
								title: "京东生鲜"
							},
							{
								img: "../../static/d5672661722bfc42.png",
								title: "京东国际"
							},
							{
								img: "../../static/2144631769da49b9.png",
								title: "京东拍卖"
							},
							{
								img: "../../static/e235d9692684daee.png",
								title: "拍拍二手"
							},
							{
								img: "../../static/bfa11aada78ce515.png",
								title: "全部"
							},
						]
					}
				],
				goodsList: [{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色"
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色"
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色"
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色"
					}
				],
				itemList: [{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色",
						with: -250
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色",
						with: -510
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色",
						with: -770
					},
					{
						ison: "../../static/00f017db096872ec.jpg",
						title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色",
						with: -1030
					},
				],
				advertisement:[
					{
						item:[
							{icon:'../../static/3699b5ab837d66cd.jpg',title:'￥769'},
							{icon:'../../static/e5edc020427c5513.jpg',title:'￥769'},
							{icon:'../../static/31cef3fe60b5dcf4.jpg',title:'￥769'},
							{icon:'../../static/f09760e24899355e.jpg',title:'￥769'},
						]
					},
					{
						item:[
							{icon:'../../static/9bc61a4ba11dd64c.jpg',title:'￥769'},
							{icon:'../../static/35b0b4c3e12c6de8.jpg',title:'￥769'},
							{icon:'../../static/6c74e2b0fd6185bc.png',title:'￥769'},
							{icon:'../../static/eb65484c642bc8ce.jpg',title:'￥769'},
						]
					}
				]
			}
		},
		mounted() {
			uni.removeStorage({
				key: 'account'
			});
		},
		onLoad() {
			uni.getStorage({
				key: 'account',
				success(res) {
					if (res.data == '' || res.data == null) {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}
				},
				fail() {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			})
		},
		methods: {
			addView() {
				var rowCount = this.itemList.length;
				var whitk = this.itemList[rowCount - 1].with - 260;
				this.goodsList.push({
					ison: "../../static/00f017db096872ec.jpg",
					title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色"
				});
				this.itemList.push({
					ison: "../../static/00f017db096872ec.jpg",
					title: "罗技(G) G502 XLIGHTSPEED无线游戏鼠标g502进阶无线版全新光学-机械混合微动HERO引擎电竞鼠标黑色",
					with: whitk
				})
			}
		}
	}
</script>

<style>
	.header {
		background-image: linear-gradient(to bottom, red, #fff);
		width: 100%;
		height: 130px;
	}

	.uni-margin-wrap {
		padding-top: 50px;
	}

	.activity {
		width: 90%;
		height: 130px;
		background-image: url("https://img11.360buyimg.com/img/jfs/t1/226923/11/7714/45152/65782c91F9d91466d/24928a901f4c3f58.png");
		background-size: 100% 100%;
		border-radius: 20px;
		margin-left: 20px;
		margin-top: 20px;
	}

	.seckill {
		background-image: url("https://img30.360buyimg.com/img/jfs/t1/227615/23/8080/1616/65782dd8F605d99af/0d97136b32d5ab1b.png");
		width: 4rem;
		height: 2rem;
		background-size: 100% 100%;
		float: left;
		margin-top: 30px;
		margin-left: 10px;
	}

	.swiper {
		height: 180rpx;
		width: 90%;
		border: 1px solid #f8f8f8;
		border-radius: 20px;
		margin-left: 20px;
		background-color: #fff;
	}

	.swiper-item {
		text-align: center;
		z-index: 9999;
		margin-left: 15px;
		margin-top: 10px;
		font-size: 13px;
		float: left;

	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.index_skil {
		width: 75%;
		height: 123px;
		border: 1px solid beige;
		border-radius: 15px;
		float: right;
		margin-right: 3px;
		margin-top: 2.5px;
		background-color: #fff;
		letter-spacing: 6px;
	}

	.goods {
		margin: 20px;
	}
</style>